<!--
 * @Author: your name
 * @Date: 2021-11-24 09:13:32
 * @LastEditTime: 2022-01-12 13:38:28
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \testHtmld:\SoftWareProject\mySoft\myVUETest\src\App.vue
-->
<template>
  <div id="app">
    <div id="nav" v-if="$store.state.indexFlag">
      <router-link to="/" title="Home">Home</router-link> |
      <router-link to="/about">About test</router-link> |
      <router-link to="/main">Main</router-link> |
      <router-link to="/usedMain">used-Main</router-link> |
      <router-link to="/componentsList">组件案例</router-link> |
      <router-link to="/plugList">插件案例</router-link> |
      <router-link to="/vueList">vue相关</router-link> |
      <router-link to="/elementList">element相关</router-link> |
      <router-link to="/goToVueCli">vueCli脚手架效果</router-link> |
      <router-link to="/demoList">案例合集</router-link> |
      <router-link to="/jQuery">jQuery && jQuery UI</router-link> |
      <router-link to="/phone">手机模块</router-link> |
      <router-link to="/maoyan">手机猫眼</router-link> |

    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view class="routerView" />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped="scoped">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
.routerView {
  height: calc(100% - 61px);
}
/* //移动端使用 */
@media screen and (max-width: 400px) {
  #app {
    font-size: 200px;
  }
}
</style>
